<template>
    <div
      class="search-content"
      :style="{ top: GLOBAL.currentEnvironment ? '0' : '' }"
    >
      <Search
        ref="topSearch"
        class="search"
        placeholder="调拨单号 | 调拨人"
        :isAdd="false"
        :isScreen="false"
        :isType="false"
      ></Search>
      <div class="formgroup">
        <div class="bottomLine"></div>
        <span class="title">调出仓库</span>
        <van-field
          :is-link="!params.outWarehouseText"
          readonly
          name="picker"
          v-model="params.outWarehouseText"
          @click="selectWarehouse('outWarehouse')"
          placeholder="请选择"
        >
          <div
            slot="right-icon"
            v-show="!!params.outWarehouseText"
            @click.stop="wCancel('outWarehouse')"
          >
            <img
              src="~@/assets/img/filedClear.png"
              style="width: 0.16rem;z-index: 999"
            />
          </div>
        </van-field>
        <div class="bottomLine"></div>
  
        <span class="title">调入仓库</span>
        <van-field
          :is-link="!params.inWarehouseText"
          readonly
          name="picker"
          v-model="params.inWarehouseText"
          @click="selectWarehouse('inWarehouse')"
          placeholder="请选择"
        >
          <div
            slot="right-icon"
            v-show="!!params.inWarehouseText"
            @click.stop="wCancel('inWarehouse')"
          >
            <img
              src="~@/assets/img/filedClear.png"
              style="width: 0.16rem;z-index: 999"
            />
          </div>
        </van-field>
        <div class="bottomLine"></div>
        <span class="title">调拨日期</span>
        <van-field
          readonly
          clickable
          is-link
          name="calendar"
          v-model="selectedPeriod"
          placeholder="请选择"
          @click="showDatePicker = true"
        />
        <van-calendar
          v-model="showDatePicker"
          title="承诺交期"
          type="range"
          color="rgb(24, 144, 255)"
          :default-date="defaultDate"
          :min-date="minDate"
          :max-date="maxDate"
          :show-confirm="true"
          @confirm="handleDateConfirm"
        />
  
        <!-- <div class="bottomLine"></div> -->
        <!-- <span class="title">规格</span>
        <van-field v-model="params.spec" label="" placeholder="请输入" /> -->
      </div>
      <div class="search-bottom">
        <span class="btncancel" @click="resetData">重置</span>
        <span class="btnconfirm" @click="confirm">确定</span>
      </div>
      <van-popup v-model="categoryVisible" position="bottom">
        <div class="top-btns">
          <div class="btn-cancel" @click="categoryCancel">取消</div>
          <div class="btn-comfirm" @click="categoryComfirm">确定</div>
        </div>
        <van-tree-select
          :items="treeData"
          :active-id.sync="activeIds"
          :main-active-index.sync="activeIndex"
          @click-item="clickItem"
        />
      </van-popup>
      <van-popup v-model="typeVisible" position="bottom">
        <van-picker
          :columns="options1"
          @confirm="handleConfirm"
          @cancel="typeVisible = false"
          show-toolbar
        />
      </van-popup>
      <van-popup v-model="warehouseTypeVisible" position="bottom">
        <van-picker
          :columns="options2"
          @confirm="warehouseTypeConfirm"
          @cancel="warehouseTypeVisible = false"
          show-toolbar
        />
      </van-popup>
      <van-popup v-model="warehouseVisible" position="bottom">
        <van-picker
          :columns="options2"
          @confirm="warehouseConfirm"
          @cancel="warehouseVisible = false"
          show-toolbar
        />
      </van-popup>
    </div>
  </template>
  
  <script>
  import moment from "moment/moment";
  
  const formP = {
    type: "",
    warehouseType: "",
    warehouseId: "",
    category: "",
    typeText: "",
    warehouseTypeText: "",
    warehouseText: "",
    categoryText: "",
    inWarehouseId: "",
    outWarehouseId: "",
    allotBeginTime: "",
    allotEndTime: "",
  };
  import Search from "@/components/search";
  import { categoryGetTree } from "@/api/system";
  import VanFieldSelectPicker from "@/components/ActionSheet/VanFieldSelectPicker";
  
  export default {
    name: "search",
    components: { Search, VanFieldSelectPicker },
    data() {
      return {
        typeVisible: false,
        warehouseTypeVisible: false,
        warehouseVisible: false,
        selectType: "",
        categoryVisible: false,
        rtitle: "",
        rname: "", //search
  
        showDatePicker: false, // 显示日历
        // selectedPeriod: ``, // moment(dateInfo[0]).format('YYYY-MM-DD')
        minDate: new Date(2020, 1, 1),
        maxDate: new Date(),
        defaultDate: [new Date(new Date().getFullYear(), 0, 1), new Date()],
        startPromiseDate: "",
        endPromiseDate: "",
  
        params: {
          keyword: "",
          outWarehouseId: "",
          outWarehouseText: "",
          inWarehouseId: "",
          inWarehouseText: "",
          spec: "",
        },
        // params: Object.assign({}, formP),
        options1: [],
        options2: [],
        options3: [],
        treeData: [],
        activeIds: [],
        activeIndex: 0,
        treeItemsList: [],
        delType: false,
      };
    },
    props: {
      propsForSon: {
        type: Object,
        default: {},
      },
    },
    watch: {
      propsForSon(newVal) {
        console.log(newVal, "newValnewVal");
        this.$refs.topSearch.value = newVal.keyword;
        this.params = newVal;
      },
    },
    computed: {
      selectedPeriod() {
        if (this.params.allotBeginTime && this.params.allotEndTime) {
          return `${this.params.allotBeginTime.slice(
            0,
            10
          )}~${this.params.allotEndTime.slice(0, 10)}`;
        }
        return "";
      },
    },
    mounted() {
      // 请求商品分类
      categoryGetTree({ code: "B05" }).then((res) => {
        let arr = res.result;
        arr.map((item) => {
          if (item.children.length > 0) {
            item.text = item.name;
            let initChildren = (e = item) => {
              e.children.map((son) => {
                son.text = son.name;
                initChildren(son);
              });
            };
            initChildren(item);
          }
        });
        this.treeData = arr;
      });
    },
    created() {},
    methods: {
      handleDateConfirm(dateInfo) {
        // // 处理选中的自定义日期
        const startDate = moment(dateInfo[0]).format("YYYY-MM-DD");
        const endDate = moment(dateInfo[1]).format("YYYY-MM-DD");
        // this.selectedPeriod = `${startDate}~${endDate}`;
        this.defaultDate = [dateInfo[0], dateInfo[1]];
        this.showDatePicker = false;
        this.params.allotBeginTime = startDate + " 00:00:00";
        this.params.allotEndTime = endDate + " 00:00:00";
        console.log("fa送的的时间：", dateInfo);
        this.$emit("updateDate", { dateInfo: dateInfo });
      },
      // 调出仓库列表，赋值
      selectWarehouse(p) {
        this.selectType = p;
        this.warehouseVisible = true;
      },
      // 点击树右侧子项
      clickItem(v) {
        if (!this.treeItemsList.find((item) => item.id == v.id)) {
          this.treeItemsList.push(v);
        }
      },
      // 选择商品分类
      categoryComfirm() {
        let texts = [];
        for (let i = 0; i < this.treeItemsList.length; i++) {
          const item = this.treeItemsList[i];
          for (let j = 0; j < this.activeIds.length; j++) {
            const ids = this.activeIds[j];
            if (item.id == ids) {
              texts.push(item.text);
            }
          }
        }
        this.params.categoryText = texts.join(",");
        this.params.category = this.activeIds.join(",");
        this.categoryVisible = false;
      },
      // 取消商品分类
      categoryCancel() {
        this.params.categoryText = "";
        this.params.category = "";
        this.categoryVisible = false;
        this.delType = !this.delType;
      },
      handleConfirm(v, i) {
        if (!v) {
          this.typeVisible = false;
          return;
        }
        this.params.typeText = v.text;
        this.params.type = v.value;
        this.typeVisible = false;
      },
      typeCancel() {
        this.params.typeText = "";
        this.params.type = "";
        this.delType = !this.delType;
      },
      warehouseTypeConfirm(v, i) {
        if (!v) {
          this.warehouseTypeVisible = false;
          return;
        }
        this.params.warehouseTypeText = v.text;
        this.params.warehouseType = v.value;
        this.warehouseTypeVisible = false;
      },
      wtypeCancel() {
        this.params.warehouseTypeText = "";
        this.params.warehouseType = "";
        this.delType = !this.delType;
      },
      // 当确认选择的时候判断是入库仓库还是出库仓库
      warehouseConfirm(v, i) {
        if (!v) {
          this.warehouseVisible = false;
          return;
        }
        switch (this.selectType) {
          case "outWarehouse":
            this.params.outWarehouseText = v.text;
            this.params.outWarehouseId = v.value;
            break;
          case "inWarehouse":
            this.params.inWarehouseText = v.text;
            this.params.inWarehouseId = v.value;
            break;
  
          default:
            break;
        }
  
        this.warehouseVisible = false;
      },
      wCancel(p) {
        console.log(p);
        switch (p) {
          case "outWarehouse":
            this.params.outWarehouseText = "";
            this.params.outWarehouseId = "";
            break;
          case "inWarehouse":
            this.params.inWarehouseText = "";
            this.params.inWarehouseId = "";
            break;
          default:
            break;
        }
        this.$forceUpdate();
        this.delType = !this.delType;
      },
      cancel() {},
      resetData() {
        this.$refs.topSearch.value = "";
        this.params = Object.assign({}, formP);
        this.$emit("confirmSearch", this.params);
      },
      confirm() {
        var keyword = this.$refs.topSearch.value;
        this.$emit("confirmSearch", this.params, keyword);
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .search-content {
    //  padding-bottom: 0.5rem;
    position: fixed;
    top: 0.35rem;
    width: 100%;
    height: 100vh;
    background: #f5f5f5;
    z-index: 99;
  
    .formgroup {
      // height: calc(100vh - 1.11rem);
      padding-bottom: 0.1rem;
      overflow-y: scroll;
      background: #ffffff;
      // padding: 0 0.16rem;
      margin-top: 0.1rem;
      margin-bottom: 0.2rem;
      padding-top: 0.1rem;
  
      .title {
        width: 0.58rem;
        height: 0.14rem;
        font-size: 0.15rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #191f25;
        line-height: 0.05rem;
        margin-left: 0.16rem;
      }
    }
  
    .search-bottom {
      height: 0.5rem;
      width: 100%;
      background: #ffffff;
      // background: red;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      bottom: 0px;
      padding: 0.11rem;
      font-size: 0.16rem;
  
      .btnconfirm {
        width: 1.72rem;
        height: 0.39rem;
        background: #1890ff;
        color: #fff;
        border-radius: 0.03rem;
        text-align: center;
        line-height: 0.39rem;
      }
  
      .btncancel {
        width: 1.72rem;
        height: 0.39rem;
        background: #f6f6f6;
        color: #191f25;
        // border: 0.01px solid rgba(25, 31, 37, 0.12);
        border-radius: 0.03rem;
        text-align: center;
        line-height: 0.39rem;
      }
    }
  }
  
  .top-btns {
    height: 0.44rem;
    display: flex;
    justify-content: space-between;
  
    div {
      padding: 0 0.16rem;
      line-height: 0.44rem;
      cursor: pointer;
    }
  
    .btn-cancel {
      color: #969799;
    }
  
    .btn-comfirm {
      color: #576b95;
    }
  }
  
  .van-sidebar-item--select::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 16px;
    background-color: #1890ff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "";
  }
  
  .van-tree-select__item--active {
    color: #1890ff;
  }
  
  .bottomLine {
    height: 0.01rem;
    background-color: #f0f0f0;
    margin: 0 0.16rem 0.14rem;
  }
  </style>
  